import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer, Observer, useObserver } from 'mobx-react';
class Store {
  number = 1
  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
  }
  add() {
    this.number++;
  }
}
let store = new Store();
function Child() {
  console.log('render Child');
  return <div>Child</div>
}
export default function () {
  return useObserver(() => (
    <>
      <p>{store.number}</p>
      <button onClick={store.add}>+</button>
    </>
  ));
}
/* export default function () {
  return (
    <div>
      <Observer>
        {
          () => (
            <>
              <p>{store.number}</p>
              <button onClick={store.add}>+</button>
            </>)
        }
      </Observer>
      <Child />
    </div>
  )
} */
//observer装饰是整个组件
//observer(Counter);
/* @observer
class Counter extends React.Component {
  render() {
    return (
      <div>
        <p>{store.number}</p>
        <button onClick={store.add}>+</button>
      </div>
    )
  }
}
export default Counter; */

/* export default observer(function () {
  return (
    <div>
      <p>{store.number}</p>
      <button onClick={store.add}>+</button>
    </div>
  )
}) */